<template>
  <div id="checkout">
  </div>
</template>

<script setup lang="ts">
import { loadStripe, type Stripe } from '@stripe/stripe-js'

const fetchClientSecret = async () => {
  // 获取客户端密钥
  const res = await getStripeClientSecret.fetch({ mode: 'embedded' })
  return res?.data.clientSecret || ''
}
const init = async () => {
  // 加载 stripe
  const stripe = (await loadStripe('pk_test_51R2tSZP8ixH7RW52Te77yDDQ5BfdJJRoXyGb3F8WUZiK1K901Sjf6D71ddqaBxQSRSsYUJhGiKdyz7iiUdouWiyM003J6WGXdv', {
    betas: ['custom_checkout_beta_5'],
  })) as Stripe

  const checkout = await stripe.initEmbeddedCheckout({
    fetchClientSecret,
    onComplete: () => {
    },
  })
  checkout.mount('#checkout')
}

onMounted(init)
</script>
